<script setup lang="ts">
</script>

<template>
  <div>
    <!-- 测试 -->
    <div>
      <el-button>test</el-button>
      <div style="display: flex">
        <el-button type="primary">test</el-button>
        <el-button type="info">test</el-button>
        <el-button type="success">test</el-button>
        <el-button type="warning">test</el-button>
        <el-button type="danger">test</el-button>
      </div>
      <div style="display: flex">
        <el-button size="large">test</el-button>
        <el-button size="medium">test</el-button>
        <el-button size="small">test</el-button>
      </div>
      <div style="display: flex;">
        <el-button text>test</el-button>
        <el-button round>test</el-button>
        <el-button circle>test</el-button>
        <el-button disabled>test</el-button>
        <el-button loading>test</el-button>
      </div>

      <!-- slot -->
      <!-- <div>
        <el-button>test</el-button>
        <el-button
          >test
          <template #icon>
            <div
              style="
                width: 0;
                height: 0;
                border: 6px solid;
                border-color: transparent;
                border-top-color: red;
              "
            ></div>
          </template>
        </el-button>
        <el-button loading
          >test
          <template #loading>
            <div
              class="btn-loading"
              style="
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 2px solid;
                border-color: transparent;
                border-top-color: red;
              "
            ></div>
          </template>
        </el-button>
      </div> -->
    </div>
  </div>
</template>

<style scoped>
@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.btn-loading {
  animation: 1s linear 1s infinite rotate2;
}
</style>
